<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix = "spring" uri = "http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<head>
	<jsp:include page="image-uploader.jsp"></jsp:include>
	<link rel="stylesheet" type="text/css" href="<c:url value="/static/css/edit-user-profile.css"/>"></link>
	<sec:authorize access="hasRole('ROLE_ADMIN')">
		<script type="text/javascript" src="<c:url value="/static/js/edit-user-profile-admin.js"/>"></script>
	</sec:authorize>
	<sec:authorize access="hasRole('ROLE_USER')">
		<script type="text/javascript" src="<c:url value="/static/js/edit-user-profile-functions.js"/>"></script>
	</sec:authorize>
	<c:if test="${userProfileForm.pictureUrl!=''}">
		<c:url value="/static/uploads/${userProfileForm.pictureUrl}" var="source"></c:url>
		<script type="text/javascript">
			window.img_url = '${source}';
		</script>
	</c:if>
	<script type="text/javascript" src="<c:url value="/static/js/edit-user-profile.js"/>"></script>
	
</head>
<body>
	<c:url value="/save-user-profile" var="action"/>
	<form:form method="post" id="form" action="${action}" commandName="userProfileForm" enctype="multipart/form-data">
		<sec:authorize access="hasRole('ROLE_ADMIN')">
			<input type="hidden" value="${userId}" name="userId" id="userId"/>
		</sec:authorize>
		<sec:authorize access="hasRole('ROLE_USER')">
			<input type="hidden" value='<sec:authentication property="principal.id"></sec:authentication>' name="userId" id="userId"/>
		</sec:authorize>
		<div class="form">
		 	<div class="form_row rigth-container">
				<div id="picture_label" class="name"></div>
			</div>	
		 	<div class="form_row ">
			 	<div class="form_row">
			 		<div class="name">
			 		<span class="label"><spring:message code="input.label.email"/></span>
			 		<span id="edit_email" class="edit_label">edit</span>
					<span id="email_label">${userProfileForm.email}</span>
			 		</div>
			 		<form:errors path="email" element="span" cssClass="error" ></form:errors>
			 	</div>
			 	
			 	<div class="form_row">
			 		<div class="name">
			 			<span class="label"><spring:message code="input.label.website"/></span>
			 			<span id="edit_website" class="edit_label">edit</span>
			 			<span id="website_label">${userProfileForm.website}</span>
			 		</div>
			 		<form:errors path="website" element="span" cssClass="error" ></form:errors>
			 	</div>
			 	<div class="form_row">
				 		<div class="name">
				 			<span class="label"><spring:message code="input.label.facebook"/></span>
				 			<span id="edit_facebook" class="edit_label">edit</span>
				 			<span id="facebook_label">${userProfileForm.facebook}</span>
				 		</div>
				 			
				 		<form:errors path="facebook" element="span" cssClass="error" ></form:errors>
			 	</div>	
			 	<div class="form_row">
			 		<div class="name">
			 		<span class="label"><spring:message code="input.label.twitter"/></span>
			 		<span id="edit_twitter" class="edit_label">edit</span>
			 		<span id="twitter_label">${userProfileForm.twitter}</span>
			 		</div>			 			
			 		<form:errors path="twitter" element="span" cssClass="error" ></form:errors>
			 	</div>
			</div>
				
		</div>
		 
	</form:form>
</body>

<div id="email_edition" class="form" style="display:none;">
	<div class="form_row">
		<div class="name"><spring:message code="input.label.email"/></div>
		<div><input type="text" id="email" name="email"/></div>
	</div>
</div>

<div id="website_edition" class="form" style="display:none">
	<div class="form_row">
		<div class="name"><spring:message code="input.label.website"/></div>
		<div><input type="text" id="website" name="website"/></div>
	</div>
</div>

<div id="facebook_edition" class="form" style="display:none">
	<div class="form_row">
		<div class="name"><spring:message code="input.label.facebook"/></div>
		<div><input type="text" id="facebook" name="facebook"/></div>
	</div>
</div>

<div id="twitter_edition" class="form" style="display:none">
	<div class="form_row">
		<div class="name"><spring:message code="input.label.twitter"/></div>
		<div><input type="text" id="twitter" name="twitter"/></div>
	</div>
</div>


